<template>
  <div 
    v-if="show" 
    class="camera-context-menu"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
    @click.stop
  >
    <div class="menu-header">
      <div class="camera-icon">📹</div>
      <div class="camera-info">
        <div class="camera-name">{{ camera?.name }}</div>
        <div class="camera-status" :class="getStatusClass(camera?.status)">
          {{ getStatusText(camera?.status) }}
        </div>
      </div>
    </div>
    
    <div class="menu-divider"></div>
    
    <div class="menu-items">
      <div class="menu-item" @click="$emit('playVideo', camera)">
        <div class="menu-icon">▶️</div>
        <div class="menu-text">播放视频</div>
      </div>
      
      <div class="menu-item" @click="$emit('focusCamera', camera)">
        <div class="menu-icon">🎯</div>
        <div class="menu-text">聚焦摄像头</div>
      </div>
      
      <div class="menu-divider"></div>
      
      <div class="menu-item" @click="$emit('editCamera', camera)">
        <div class="menu-icon">✏️</div>
        <div class="menu-text">编辑摄像头</div>
      </div>
      
      <div class="menu-item" @click="$emit('toggleVisibility', camera)">
        <div class="menu-icon">{{ isCameraHidden ? '👁️' : '🙈' }}</div>
        <div class="menu-text">{{ isCameraHidden ? '显示摄像头' : '隐藏摄像头' }}</div>
      </div>
      
      <div class="menu-divider"></div>
      
      <div class="menu-item danger" @click="$emit('deleteCamera', camera)">
        <div class="menu-icon">🗑️</div>
        <div class="menu-text">删除摄像头</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  position: {
    type: Object,
    default: () => ({ x: 0, y: 0 })
  },
  camera: {
    type: Object,
    default: null
  },
  hiddenCameras: {
    type: Set,
    default: () => new Set()
  }
})

defineEmits([
  'playVideo',
  'focusCamera', 
  'editCamera',
  'toggleVisibility',
  'deleteCamera'
])

// 计算摄像头是否隐藏
const isCameraHidden = computed(() => {
  return props.camera && props.hiddenCameras.has(props.camera.id)
})

const getStatusText = (status) => {
  switch (status) {
    case 'online': return '在线'
    case 'offline': return '离线'
    case 'maintenance': return '维护中'
    default: return '未知'
  }
}

const getStatusClass = (status) => {
  switch (status) {
    case 'online': return 'status-online'
    case 'offline': return 'status-offline'
    case 'maintenance': return 'status-maintenance'
    default: return 'status-unknown'
  }
}
</script>

<style lang="scss" scoped>
.camera-context-menu {
  position: fixed;
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid #e5e7eb;
  z-index: 3000;
  min-width: 200px;
  overflow: hidden;
  user-select: none;
  
  .menu-header {
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 10px;
    
    .camera-icon {
      font-size: 20px;
      flex-shrink: 0;
    }
    
    .camera-info {
      flex: 1;
      min-width: 0;
      
      .camera-name {
        font-weight: 600;
        font-size: 14px;
        color: #1f2937;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .camera-status {
        font-size: 12px;
        margin-top: 2px;
        
        &.status-online {
          color: #059669;
        }
        
        &.status-offline {
          color: #dc2626;
        }
        
        &.status-maintenance {
          color: #d97706;
        }
        
        &.status-unknown {
          color: #6b7280;
        }
      }
    }
  }
  
  .menu-items {
    padding: 4px 0;
  }
  
  .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    
    &:hover {
      background: #f3f4f6;
    }
    
    &.danger {
      &:hover {
        background: #fef2f2;
        
        .menu-text {
          color: #dc2626;
        }
      }
    }
    
    .menu-icon {
      font-size: 16px;
      flex-shrink: 0;
      width: 20px;
      text-align: center;
    }
    
    .menu-text {
      font-size: 14px;
      color: #374151;
      flex: 1;
    }
  }
  
  .menu-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
  }
}
</style>